<template>
  <view class="bg">
    <view class="form_bg">
      <u-form
        :model="model"
        label-width="160"
        :label-style="{
          color: 'rgba(39, 43, 50, 1)',
          fontSize: '28rpx',
          fontWeight: '500',
          fontFamily: 'PingFang SC',
        }"
      >
        <view class="item">
          <u-form-item
            label="任务名称"
            :rules="rules"
            ref="uForm"
            :border-bottom="false"
            :required="true"
          >
            <u-input
              placeholder="请输入任务名称"
              v-model="model.rwmc"
              type="text"
            ></u-input>
          </u-form-item>
        </view>
        <view class="item">
          <u-form-item
            label="任务内容"
            :rules="rules"
            ref="uForm"
            :border-bottom="false"
            label-position="top"
          >
            <u-input
              type="textarea"
              placeholder="请输入任务内容"
              v-model="model.rwnr"
            />
          </u-form-item>
        </view>
        <view class="item">
          <u-form-item
            label-position="top"
            label="任务时限类型"
            prop="payType"
            :required="true"
          >
            <u-radio-group
              v-model="model.rwsxlx"
              @change="radioGroupChange"
              width="auto"
            >
              <u-radio
                shape="circle"
                v-for="(item, index) in radioList"
                :key="index"
                :name="item.type"
              >
                {{ item.name }}
              </u-radio>
            </u-radio-group>
          </u-form-item>
        </view>
        <view class="item_flex" v-if="model.rwsxlx === 1">
          <view class="item_50">
            <u-form-item
              label="任务时限"
              :rules="rules"
              ref="uForm"
              :border-bottom="false"
            >
              <u-input
                placeholder="请选择日期"
                v-model="model.rwsx"
                type="text"
                @click="showPopup('dsxrq')"
              >
              </u-input>
            </u-form-item>
          </view>
          <view class="item_50">
            <u-form-item
              label="任务天数"
              :rules="rules"
              ref="uForm"
              :border-bottom="false"
            >
              <u-input
                placeholder="请输入天数"
                v-model="model.rwts"
                type="text"
              ></u-input>
            </u-form-item>
          </view>
        </view>
        <view class="item_flex2" v-if="model.rwsxlx === 2">
          <u-form-item>
            <u-radio-group
              v-model="model.rwsxlxzqx"
              @change="radioGroupChildChange"
              width="auto"
            >
              <u-radio
                shape="circle"
                v-for="(item, index) in radioListChild"
                :key="index"
                :name="item.type"
              >
                {{ item.name }}
              </u-radio>
            </u-radio-group></u-form-item
          >
          <u-form-item
            label="反馈时限"
            :rules="rules"
            ref="uForm"
            :border-bottom="false"
            v-for="(item, index) in model.zqx"
            :key="index"
            v-show="model.rwsxlxzqx == index + 1"
          >
            <u-input
              :placeholder="item.pla"
              v-model="item.value"
              type="text"
              @click="showPopup(item.pla)"
            ></u-input>
          </u-form-item>
        </view>
        <view class="item_flex2" v-if="model.rwsxlx === 3">
          <u-form-item
            label="任务时限"
            :rules="rules"
            ref="uForm"
            :border-bottom="false"
            v-for="(item, index) in model.dsx"
            :key="index"
          >
            <u-input
              placeholder="请选择日期"
              v-model="item.value"
              type="text"
              @click="showPopup('dsx', index)"
            >
            </u-input
            ><u-button
              type="success"
              v-if="index == 0"
              @click="model.dsx.push({ value: '' })"
              >添加</u-button
            >
            <u-button type="error" @click="model.dsx.pop()" v-else
              >删除</u-button
            >
          </u-form-item>
        </view>
        <view class="item">
          <u-form-item
            label="任务附件"
            :rules="rules"
            ref="uForm"
            :border-bottom="false"
          >
            <u-input
              placeholder="点击选择添加附件"
              v-model="model.rwfj"
              type="text"
            ></u-input>
          </u-form-item>
        </view>

        <view v-for="(item, indexZrw) in model.children" :key="indexZrw">
          <view class="form_btn_flex">
            <view class="font1">子任务({{ indexZrw + 1 }})</view>
            <view class="font2" @click="deleteChildTask(indexZrw)">删除</view>
          </view>

          <view class="item">
            <u-form-item
              label="子事项"
              :rules="rules"
              ref="uForm"
              :border-bottom="false"
              :required="true"
            >
              <u-input
                placeholder="请输入子事项"
                :v-model="item.zsx"
                type="text"
              ></u-input>
            </u-form-item>
          </view>

          <view class="item">
            <u-form-item
              label="所属科室"
              :rules="rules"
              ref="uForm"
              :border-bottom="false"
              :required="true"
            >
              <u-input
                placeholder="请输入或点击选择科室"
                :v-model="item.ssks"
                type="text"
              ></u-input>
            </u-form-item>
          </view>

          <view class="item item_add">
            <u-form-item
              label="承办人"
              :rules="rules"
              ref="uForm"
              :border-bottom="false"
              :required="true"
            >
              <u-input
                placeholder=""
                v-model="item.cbr"
                type="text"
                disabled
              ></u-input>
            </u-form-item>
            <image src="../../../static/images/common/add.png" mode=""></image>
          </view>

          <view class="item">
            <u-form-item
              label-position="top"
              label="子任务时限类型"
              prop="payType"
              :required="true"
            >
              <u-radio-group
                v-model="item.zrwsxlx"
                @change="radioGroupChangeChild($event, indexZrw)"
                width="auto"
              >
                <u-radio
                  shape="circle"
                  v-for="(item, index) in radioList"
                  :key="index"
                  :name="item.type"
                >
                  {{ item.name }}
                </u-radio>
              </u-radio-group>
            </u-form-item>
          </view>
          <view class="item_flex" v-if="item.zrwsxlx === 1">
            <view class="item_50">
              <u-form-item
                label="任务时限"
                :rules="rules"
                ref="uForm"
                :border-bottom="false"
              >
                <u-input
                  placeholder="请选择日期"
                  v-model="item.rwsx"
                  type="text"
                  @click="showPopup('dsxrq', 0, 'zz', indexZrw)"
                >
                </u-input>
              </u-form-item>
            </view>
            <view class="item_50">
              <u-form-item
                label="任务天数"
                :rules="rules"
                ref="uForm"
                :border-bottom="false"
              >
                <u-input
                  placeholder="请输入天数"
                  v-model="item.rwts"
                  type="text"
                ></u-input>
              </u-form-item>
            </view>
          </view>
          <view class="item_flex2" v-if="item.zrwsxlx === 2">
            <u-form-item>
              <u-radio-group
                v-model="item.zrwsxlxzqx"
                @change="radioGroupChildChangeChild($event, indexZrw)"
                width="auto"
              >
                <u-radio
                  shape="circle"
                  v-for="(item, index) in radioListChild"
                  :key="index"
                  :name="item.type"
                >
                  {{ item.name }}
                </u-radio>
              </u-radio-group></u-form-item
            >
            <u-form-item
              label="反馈时限"
              :rules="rules"
              ref="uForm"
              :border-bottom="false"
              v-for="(item2, index) in item.zqx"
              :key="item2.pla"
              v-show="item.zrwsxlxzqx == index + 1"
            >
              <u-input
                :placeholder="item2.pla"
                v-model="item2.value"
                type="text"
                @click="showPopup(item2.pla, 0, 'zz', indexZrw)"
              ></u-input>
            </u-form-item>
          </view>
          <view class="item_flex2" v-if="item.zrwsxlx === 3">
            <u-form-item
              label="任务时限"
              :rules="rules"
              ref="uForm"
              :border-bottom="false"
              v-for="(item2, index) in item.dsx"
              :key="index"
            >
              <u-input
                placeholder="请选择日期"
                v-model="item2.value"
                type="text"
                @click="showPopup('dsx', index, 'zz', indexZrw)"
              >
              </u-input
              ><u-button
                type="success"
                v-if="index == 0"
                @click="item.dsx.push({ value: '' })"
                >添加</u-button
              >
              <u-button type="error" @click="item.dsx.pop()" v-else
                >删除</u-button
              >
            </u-form-item>
          </view>
        </view>

        <view class="add_child_btn">
          <image src="../../../static/images/common/add.png" mode=""></image>
          <view class="fontStyel" @click="addChildTask">添加子任务</view>
        </view>
      </u-form>
    </view>
    <view class="bottom_btn">
      <view class="left_btn">暂存草稿</view>
      <view class="right_btn">提交</view>
    </view>
    <u-picker
      :mode="picker.mode"
      v-model="show"
      :params="picker.params"
      :range="picker.range"
      :default-selector="[0, 1]"
      @confirm="popupConfirm"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timeShow: false,
      model: {
        rwmc: "",
        rwnr: "",
        rwsxlx: 1,
        rwsxlxzqx: 1,
        // 单时限
        rwsx: "",
        rwts: "",
        // 周期性
        zqx: [
          {
            pla: "请输入天数",
            value: "",
          },
          {
            pla: "请输入周",
            value: "",
          },
          {
            pla: "请输入月",
            value: "",
          },
          {
            pla: "请输入季度",
            value: "",
          },
        ],
        // 多时限
        dsx: [
          {
            value: "",
          },
        ],
        // 多时限索引
        dsxIndex: 0,
        rwfj: "",
        children: [
          {
            zsx: "",
            ssks: "",
            cbr: "",
            zrwsxlx: 1,
            zrwsxlxzqx: 1,
            rwsx: "",
            rwts: "",
            zqx: [
              {
                pla: "请输入天数",
                value: "",
              },
              {
                pla: "请输入周",
                value: "",
              },
              {
                pla: "请输入月",
                value: "",
              },
              {
                pla: "请输入季度",
                value: "",
              },
            ],
            dsx: [
              {
                value: "",
              },
            ],
            dsxIndex: 0,
          },
        ],
        // 子任务索引
        zrwIndex: 0,
      },
      rules: {
        rwmc: [
          {
            required: true,
            message: "请输入任务名称",
            trigger: "blur",
          },
        ],
      },
      radioList: [
        {
          type: 1,
          name: "单时限",
          checked: true,
          disabled: false,
        },
        {
          type: 2,
          name: "周期性",
          checked: false,
          disabled: false,
        },
        {
          type: 3,
          name: "多时限",
          checked: false,
          disabled: false,
        },
      ],
      radioListChild: [
        {
          type: 1,
          name: "天",
          checked: true,
          disabled: false,
        },
        {
          type: 2,
          name: "周",
          checked: false,
          disabled: false,
        },
        {
          type: 3,
          name: "月",
          checked: false,
          disabled: false,
        },
        {
          type: 4,
          name: "季度",
          checked: false,
          disabled: false,
        },
      ],
      //   弹窗
      show: false,
      picker: {
        mode: "",
        params: {},
        range: [],
      },
      popuptype: "",
    };
  },
  methods: {
    //   弹窗
    showPopup(type, index, type2, index2) {
      this.popuptype = type;
      if (type == "请输入天数") {
        this.show = false;
      } else {
        this.show = true;
      }
      if (type == "dsx") {
        this.model.dsxIndex = index;
      }
      if (type2 == "zz") {
        this.model.zrwIndex = index2;
      } else {
        this.model.zrwIndex = -1;
      }
      if (type2 == "zz" && type == "dsx") {
        this.model.children[index2].dsxIndex = index;
      }
      // 主任务单时限
      if (
        type == "dsxrq" ||
        type == "请输入月" ||
        type == "请输入季度" ||
        type == "dsx"
      ) {
        this.picker = {
          mode: "time",
          params: {
            year: true,
            month: true,
            day: true,
            hour: false,
            minute: false,
            second: false,
          },
          range: [],
        };
      }
      // 主任务周期性
      if (type == "请输入周") {
        this.picker = {
          mode: "selector",
          params: {},
          range: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日",
          ],
        };
      }
      // 主任务多时限
    },
    popupConfirm(e) {
      console.log(this.model.zrwIndex);
      if (this.model.zrwIndex == -1) {
        if (this.popuptype == "dsxrq") {
          this.model.rwsx =
            e.year +
            "_" +
            e.month +
            "_" +
            e.day 
            // +
            // " " +
            // e.hour +
            // ":" +
            // e.minute +
            // ":" +
            // e.second;
        }
        if (this.popuptype == "请输入周") {
          this.model.zqx[1].pla = this.picker.range[e[0]];
        }
        if (this.popuptype == "请输入月") {
          this.model.zqx[2].pla =
            e.year +
            "_" +
            e.month +
            "_" +
            e.day 
            // +
            // " " +
            // e.hour +
            // ":" +
            // e.minute +
            // ":" +
            // e.second;
        }
        if (this.popuptype == "请输入季度") {
          this.model.zqx[3].pla =
            e.year +
            "_" +
            e.month +
            "_" +
            e.day 
            // +
            // " " +
            // e.hour +
            // ":" +
            // e.minute +
            // ":" +
            // e.second;
        }
        if (this.popuptype == "dsx") {
          this.model.dsx[this.model.dsxIndex].value =
            e.year +
            "_" +
            e.month +
            "_" +
            e.day 
            // +
            // " " +
            // e.hour +
            // ":" +
            // e.minute +
            // ":" +
            // e.second;
        }
      } else {
        if (this.popuptype == "dsxrq") {
          this.model.children[this.model.zrwIndex].rwsx =
            e.year +
            "_" +
            e.month +
            "_" +
            e.day 
            // +
            // " " +
            // e.hour +
            // ":" +
            // e.minute +
            // ":" +
            // e.second;
        }
        if (this.popuptype == "请输入周") {
          this.model.children[
            this.model.zrwIndex
          ].zqx[1].pla = this.picker.range[e[0]];
        }
        if (this.popuptype == "请输入月") {
          this.model.children[this.model.zrwIndex].zqx[2].pla =
            e.year +
            "_" +
            e.month +
            "_" +
            e.day 
            // +
            // " " +
            // e.hour +
            // ":" +
            // e.minute +
            // ":" +
            // e.second;
        }
        if (this.popuptype == "请输入季度") {
          this.model.children[this.model.zrwIndex].zqx[3].pla =
            e.year +
            "_" +
            e.month +
            "_" +
            e.day 
            // +
            // " " +
            // e.hour +
            // ":" +
            // e.minute +
            // ":" +
            // e.second;
        }
        if (this.popuptype == "dsx") {
          this.model.children[this.model.zrwIndex].dsx[
            this.model.children[this.model.zrwIndex].dsxIndex
          ].value =
            e.year +
            "_" +
            e.month +
            "_" +
            e.day 
            // +
            // " " +
            // e.hour +
            // ":" +
            // e.minute +
            // ":" +
            // e.second;
        }
      }
    },
    // radio选择发生变化
    radioGroupChange(e) {
      this.model.rwsxlx = e;
    },
    radioGroupChildChange(e) {
      this.model.rwsxlxzqx = e;
    },
    radioGroupChangeChild(e, index) {
      this.model.children[index].zrwsxlx = e
      // if (e == "单时限") {
      //   this.$set(this.model.children[index], "zrwsxlx", 1);
      // }
      // if (e == "周期性") {
      //   this.$set(this.model.children[index], "zrwsxlx", 2);
      // }
      // if (e == "多时限") {
      //   this.$set(this.model.children[index], "zrwsxlx", 3);
      // }
    },
    // 子任务
    radioGroupChildChangeChild(e, index) {
      this.model.children[index].zrwsxlxzqx = e;
    },
    // 新增子任务
    addChildTask() {
      this.model.children.push({
        zsx: "",
        ssks: "",
        cbr: "",
        zrwsxlx: 1,
        zrwsxlxzqx: 1,
        rwsx: "",
        rwts: "",
        zqx: [
          {
            pla: "请输入天数",
            value: "",
          },
          {
            pla: "请输入周",
            value: "",
          },
          {
            pla: "请输入月",
            value: "",
          },
          {
            pla: "请输入季度",
            value: "",
          },
        ],
        dsx: [
          {
            value: "",
          },
        ],
        dsxIndex: 0,
      });
    },
    // 删除子任务
    deleteChildTask(index) {
      this.model.children.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  background-color: white;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
  span {
    margin-left: 14rpx !important;
    margin-right: 6rpx !important;
  }
}
.item_add {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  image {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }
}
.item_flex {
  background-color: white;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
}
.item_flex2 {
  background-color: white;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
}

.item_50 {
  width: 50%;
}

.form_btn_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;

  .font1 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #8e9cb3;
  }

  .font2 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #3074ff;
  }
}

.add_child_btn {
  width: 100%;
  height: 80rpx;
  background: #e7e9f0;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }

  .fontStyel {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #3074ff;
  }
}

.form_bg {
  padding-bottom: 98rpx;
}

.bottom_btn {
  width: 100vw;
  height: 98rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left_btn {
    width: 50%;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e7e9f0;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #8e9cb3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .right_btn {
    width: 50%;
    height: 100%;
    background: rgba(48, 116, 255, 1);
    border: 1px solid #e7e9f0;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(254, 254, 254, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
